<template>
  <a-popover title="疑问？">
    <template slot="content">
      <div class="question-tip">
        {{ title }}
      </div>
    </template>
    <a-icon class="question-circle" type="question-circle" />
  </a-popover>
</template>
<script>
export default {
  name: 'HTooltip',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {

    };
  },
  created() {

  },
  methods: {

  }
};
</script>
<style lang="less">
.question-circle {
  color: red;
  font-size: 16px;
  cursor: pointer;
  margin-left: 12px;
  animation: cir 0.3s ease infinite alternate;
  @keyframes cir {
    from {
      transform: translate3d(0,0,0);
    }
    to {
      transform: translate3d(0,-6px,0);
    }
  }
}
.question-tip {
  max-width: 300px;
  font-weight: 900 !important;
  font-size: 18px;

}

</style>
